<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .box {
    width: 100%;
    height: 100%;
    background-color: #4E4EF0;
    transition: all 0.5s;
  }
  .particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #4E4EF0;
    border-radius: 50%;
    transition: transform 0.5s, opacity 0.5s;
  }
</style>
<title>Box Break Animation</title>
</head>
<body>
  <div class="container" id="container">
    <div class="box" id="box"></div>
  </div>
  <script>
    const container = document.getElementById("container");
    const box = document.getElementById("box");

    box.addEventListener("click", () => {
      const particles = [];
      const particleCount = 30;

      box.style.backgroundColor = "transparent"; // 隐藏原盒子

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement("div");
        particle.className = "particle";
        container.appendChild(particle);
        particles.push(particle);

        const x = Math.random() * container.offsetWidth;
        const y = Math.random() * container.offsetHeight;

        particle.style.left = `${x}px`;
        particle.style.top = `${y}px`;
      }

      setTimeout(() => {
        particles.forEach(particle => {
          particle.style.transform = "translate(-50%, -50%) scale(1)";
          particle.style.opacity = "1";
        });
      }, 10);

      // 点击盒子之后粒子保持悬停在盒子宽高的200%位置
      setTimeout(() => {
        particles.forEach(particle => {
          const x = Math.random() * container.offsetWidth * 2;
          const y = Math.random() * container.offsetHeight * 2;

          particle.style.left = `${x}px`;
          particle.style.top = `${y}px`;
        });
      }, 1000);
    });
  </script>
</body>
</html>
